import { createContext ,useState,useContext} from "react";

// const {Provider,Consumer}=createContext()
const DataContext = createContext()

function GrabdSon(params) {
  const { count, setCount } = useContext(DataContext)
  return(
    <div>
      <h3   
        onClick={() => {
          setCount(count + 1)
        }}> 孙子:{count}</h3>
      <DataContext.Consumer>
        {(data)=>{
          return <h4>共享数据：{data.count}</h4>
        }}
      </DataContext.Consumer>
    </div>
  )
}

function Son(params) {
  return(
    <div>
      <h2>儿子</h2>
      <GrabdSon/>
    </div>
  )
}

function App(params) {
  const[count,setCount] =useState(20)
  return(
    <DataContext.Provider value={{count,setCount}}>
    <div>
      <h1>爷爷：{count}</h1>
      <Son/>
    </div>
    </DataContext.Provider>
  )
}

export default App